import React, {Component} from 'react';
import debounce from "lodash.debounce";
import 'styles/advertisement-page/ad-hua-bei.scss';

import { isSupportScroll, scrollToMyDestination } from 'share/common';

import HeaderImg from 'images/ad-img/hua-bei/header.jpg';
import Step1Img from 'images/ad-img/hua-bei/step1.png';
import Step2Img from 'images/ad-img/hua-bei/step2.jpg';
import Step3Img from 'images/ad-img/hua-bei/step3.jpg';
import CloseImg from 'images/ad-img/hua-bei/close.png';
import PuppyImg from 'images/ad-img/hua-bei/puppy.png';


class AdHuaBei extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: [
        {
          title: '第一步：企业开通花呗工作花',
          img: Step1Img
        },
        {
          title: '第二步：员工在汇联易进行一键报销',
          img: Step2Img
        },
        {
          title: '第三步：财务在汇联易进行审核',
          img: Step3Img
        },
        {
          title: '第四步：员工收到报销款还花呗账单',
          img: null
        }
      ],
      questionList: [
        {
          Q: 'Q1：工作花是什么',
          line1: '开通工作花的员工能够获得：',
          line2: '1.勾选花呗账单一键导出至汇联易，快捷报销新体验。',
          line3: '2.专享额度提额机会。'
        },
        {
          Q: 'Q2：额度使用范围',
          line1: '通过花呗工作花获得的是通用固定额度，与现有花呗额度叠加，可在所有支持花呗付款的场景使用。'
        },
        {
          Q: 'Q3：一键报销相关问题',
          line1: '1.付款：目前仅支持花呗账单一键导出，所以在因公消费时，请务必记得选择花呗付款哦。',
          line2: '2.勾选导出：您可以在汇联易中的“消费记录”子应用或【花呗】-【我的】-【工作花】进入工作花呗主页，选择需要报销的账单明细。在企业受理前支持随时修改。',
          line3: '3.出账还款：出账与还款都与花呗是一样的哦。'
        },
        {
          Q: 'Q4：报销结果与花呗页面展示不符',
          line1: '如您在一键导出至汇联易后，在汇联易进行了调整，对应的信息不会同步体现在花呗工作花主页中，花呗工作主页息仅作为信息同步，具体到账以汇联易实际报销结果为准。',
        }
      ],
      activeSection: 'GUIDE',
      showBar: false
    }
    this.scrolling = false;
    this.scrollingFalse = debounce(this.scrollingFalse, 1100);
  }

  componentWillMount() {

  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  onScrollPage = (e) => {
    if (!this.scrolling) {
      if (this.huaBerPage.scrollTop > (this.sectionOneRef.offsetTop - 100)) {
        this.setState({showBar: true})
      } else {
        this.setState({showBar: false})
      }
      if (this.huaBerPage.scrollTop > (this.sectionTwoRef.offsetTop - 72)) {
        this.setState({activeSection: 'Q&A'})
      } else {
        this.setState({activeSection: 'GUIDE'})
      }
    }
  }

  handleMenuClick = (isFirstMenu) => {
      this.scrolling = true;
      this.scrollingFalse();
      if (isFirstMenu) {
        scrollToMyDestination(this.huaBerPage, this.sectionOneRef.offsetTop - 92);
        this.setState({activeSection: 'GUIDE'})
      } else {
        scrollToMyDestination(this.huaBerPage, this.sectionTwoRef.offsetTop - 72);
        this.setState({activeSection: 'Q&A'})
      }
  }

  scrollingFalse = () => {
    this.scrolling = false;
  }

  onWheelHandle = () => {
    this.scrolling = false;
  }

  render() {
    const { content, questionList, showBar, activeSection } = this.state;
    const isSupport = isSupportScroll(this.huaBerPage);
    let isWin = window.navigator.platform === 'Win32'; //判断是否是windows
    return (
      <div className="container-for-ad" ref={ref => this.huaBerPage = ref} onScroll={this.onScrollPage} onWheel={this.onWheelHandle}>
        <div className="hua-bei-page">
          <div className="header">
            <div className="head-banner">
              <div className="header-img" style={{backgroundImage: `url('${HeaderImg}')`,}} />
              {/*<img src={HeaderImg} alt="头部图" className="head-img"/>*/}
              <img src={PuppyImg} alt="吉祥物" onMouseDown={(e)=>e.preventDefault()} className="head-puppy-img"/>
              <a href="tel:400-829-7878" className="fake-contact" />
            </div>
            <div className={`${showBar ? 'bar' : 'bar bar-hide'} ${isWin ? 'bar-margin' : ''}`}>
              <div className="menu">
                <div
                  onClick={()=>isSupport && this.handleMenuClick(true)}
                  className={activeSection === 'GUIDE' ? 'single-menu active' : 'single-menu'}
                  style={{cursor: isSupport ? 'pointer' : 'default'}}
                >
                  使用指南
                </div>
                <div
                  onClick={()=>isSupport && this.handleMenuClick(false)}
                  className={activeSection === 'Q&A' ? 'single-menu active' : 'single-menu'}
                  style={{cursor: isSupport ? 'pointer' : 'default'}}
                >
                  常见问题
                </div>
              </div>
              <div className="method">
                <span className="describe">联系您的客服经理 或 拨打 <a className="tel-a" href="tel:400-829-7878">400-829-7878</a> 进行开通 </span>
              </div>
            </div>
            <div className="exit-button" onClick={()=>{this.props.onCancel()}}>
              <img className='exit-img' src={CloseImg} alt="关闭"/>
            </div>
          </div>
          <div className="content">
            <div className="section-one" ref={ref => this.sectionOneRef = ref}>
              <div className="main-title">
                {'如何使用花呗工作花？'}
              </div>
              <div className="detail">
                {content.map((item,index) =>
                  <div className="single-step" key={index}>
                    <div className='title-box'>
                      <span className="item-title">{item.title}</span>
                      <div className='title-circle'><div className="number">{index + 1}</div></div>
                    </div>
                    {item.img && <img className='des-img' onMouseDown={(e)=>e.preventDefault()} src={item.img} alt={item.title}/>}
                    <div className="line" />
                  </div>
                )}
              </div>
            </div>
          </div>
          <div className="section-two" ref={ref => this.sectionTwoRef = ref}>
            <div className="content">
              <div className="main-title">
                {'常见问题'}
              </div>
              {questionList.map(item =>
                <div className="single-question">
                  <div className="question-title">
                    {item.Q}
                  </div>
                  <div className="question-answer">
                    {item.line1}
                  </div>
                  {item.line2 && <div className="question-answer">
                    {item.line2}
                  </div>}
                  {item.line3 && <div className="question-answer">
                    {item.line3}
                  </div>}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}


export default AdHuaBei;
